<template>
	<div class="cart-bottom-var">
		<div class="total-check">
			<check-button :is-checked="isSelectAll" @click.native = "checkButton"/>
			<span>全选</span>
		</div>
		<div class="total-price">
			<span>合计：￥{{totalPrice}}</span>
		</div>
		<div class="calc" @click="calcClick">
			去结算{{calcCount}}
		</div>
	</div>
</template>

<script>
	import CheckButton from 'components/content/checkbutton/CheckButton'
	
	import {mapGetters} from 'vuex'

	export default{
		name: "CartBottomBar",
		mounted(){
			// this.$bus.$on('changeCheck', ischeck => {
			// 	this.isChecked = ischeck
			// })
		},
		components: {
			CheckButton
		},
		computed: {
			...mapGetters(['length', 'cartList']),
			totalPrice() {
				// let total = 0;
				// // 循环遍历出商品
				// for(let item of this.cartList){
				// 	if(item.isChecked){
				// 		total += item.price * item.count
				// 	}
				// }
				// return total
				
				return this.cartList.filter(item => {
					return item.isChecked === true
				}).reduce((prev, items) => {
					return prev + items.price * items.count
				}, 0).toFixed(2)
			},
			calcCount() {
				return this.cartList.filter(item => {
					return item.isChecked === true
				}).reduce((prev, item) => {
					return prev + item.count
				}, 0)
			},
			isSelectAll() {
				if(this.cartList.length === 0) return false
				// 简写方式
				return !this.cartList.find(item => !item.isChecked)
				// 传统方式
				// let ischeck = true
				// this.cartList.find(item => {
				// 	if(item.isChecked === false){
				// 		ischeck = false
				// 	}
				// })
				// return ischeck
			}
		},
		methods: {
			checkButton() {
				
				if(this.isSelectAll){
					this.cartList.forEach(item => item.isChecked = false)
				}else{
					this.cartList.forEach(item => item.isChecked = true)
				}
				
			},
			calcClick() {
				if(this.calcCount === 0){
					this.$toast.show('请选中购买的商品', 700)
				}
			}
		}
	}
</script>

<style scoped>
	.cart-bottom-var{
		width: 100%;
		height: 40px;
		
		position: fixed;
		bottom: 49px;
		
		background: #eeeeee;
		display: flex;
		line-height: 40px;
		text-align: center;
	}
	
	.total-check{
		width: 25%;
		display: flex;
		justify-content: center;
	}
	
	.total-price{
		width: 50%;
	}
	
	.calc{
		width: 25%;
		background-color: #ff5028;
		color: #fff;
	}
</style>
